<template>
  <div class="table-page">
    <div class="flex flex-wrap w-full pl-10 box-border">
      <ms-data-card title="已参与会员数量" :value="totalData?.allCount"></ms-data-card>
      <ms-data-card title="A单任务已完成会员数量" :value="totalData?.cloudCount"></ms-data-card>
      <ms-data-card title="云出单任务已完成会员数量" :value="totalData?.appCount"></ms-data-card>
    </div>
    <a-form label-align="right" layout="inline" auto-label-width :model="listParams" size="small" class="form my-10">
      <a-form-item hide-label>
        <ms-date
          v-model:start="listParams.startAt"
          v-model:end="listParams.endAt"
          :disabledDate="(current) => dayjs(current).isAfter(dayjs().endOf('date'))"
          @change="changeCurrent(1)"
        ></ms-date>
      </a-form-item>
      <a-form-item field="status" label="完成状态">
        <a-radio-group v-model="listParams.status" @change="changeCurrent(1)">
          <a-radio :value="0">全部</a-radio>
          <a-radio :value="1">未完成</a-radio>
          <a-radio :value="2">已完成</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item field="inviteCode" hide-label>
        <a-input v-model="listParams.inviteCode" placeholder="输入邀请码检索" @press-enter="changeCurrent(1)"></a-input>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" size="small" @click="changeCurrent(1)">
            <template #icon>
              <icon-search />
            </template>
            <template #default> 查询 </template>
          </a-button>
          <a-button size="small" @click="onResetSearch">
            <template #icon>
              <icon-sync />
            </template>
            <template #default> 重置 </template>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <GiTable
      row-key="id"
      id="freeActivity"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      @refresh="getTableData"
    >
    </GiTable>
  </div>
</template>

<script setup>
import { usePagination } from '@/hooks'
import { statisticsActivityFreeList } from '@/apis'
import { v4 } from 'uuid'
import dayjs from 'dayjs'

defineOptions({ name: 'freeActivity' })

const columns = ref([
  {
    title: '邀请码',
    width: 120,
    align: 'center',
    dataIndex: 'inviteCode'
  },
  {
    title: '月份',
    width: 90,
    align: 'center',
    dataIndex: 'month'
  },
  {
    title: '参与时间',
    width: 150,
    align: 'center',
    dataIndex: 'createdAt'
  },
  {
    title: '用户状态',
    width: 120,
    align: 'center',
    dataIndex: 'status',
    render: ({ record }) => {
      return record.status == 1 ? '续期' : '未续期'
    }
  },
  {
    title: '到期时间',
    width: 150,
    align: 'center',
    dataIndex: 'expiresAt'
  },
  {
    title: '云出单数量',
    width: 130,
    align: 'center',
    dataIndex: 'cloudOrderNum'
  },
  {
    title: '云任务完成时间',
    width: 150,
    align: 'center',
    dataIndex: 'cloudOrderAt',
    render: ({ record }) => {
      return record.cloudOrderAt || '--'
    }
  },
  {
    title: 'app订单数量',
    width: 130,
    align: 'center',
    dataIndex: 'appOrderNum'
  },
  {
    title: 'app满足条件时间',
    width: 150,
    align: 'center',
    dataIndex: 'appOrderAt',
    render: ({ record }) => {
      return record.appOrderAt || '--'
    }
  }
])
const loading = ref(false)
const tableData = ref([])
const { pagination, setTotal } = usePagination(() => getTableData(), {
  defaultPageSize: 15
})
const totalData = reactive({
  cloudCount: 0,
  appCount: 0,
  allCount: 0
})
const listParams = reactive({
  page: 1,
  inviteCode: undefined,
  startAt: undefined,
  endAt: undefined,
  status: undefined
})

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    const res = await statisticsActivityFreeList(listParams)
    totalData.cloudCount = res.data.cloudCount
    totalData.appCount = res.data.appCount
    totalData.allCount = res.data.allCount
    tableData.value = res.data.list.list.map((item) => {
      return { ...item, id: v4() }
    })
    setTotal(res?.data?.list?.meta?.pagination?.total ?? 0)
  } finally {
    loading.value = false
  }
}
getTableData()
// // 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

// 重置筛选查询
const onResetSearch = () => {
  listParams.inviteCode = listParams.startAt = listParams.endAt = listParams.status = undefined
  changeCurrent(1)
}
</script>

<style lang="scss" scoped>
.table-page {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .form {
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
}
</style>
